const images={};
const list=['../image/tex1.jpg','../image/tex2.jpg','../image/tex3.jpg','../image/tex4.jpg'];   //添加需要使用到的材质图片路径
const radius=10;
const canvas=document.getElementById('gameUI');
const context=canvas.getContext('2d');

context.fillStyle='black';
context.fillRect(0,0,400,400);

//绘制黑色背景
drawBackGoound("black");

//绘制文本
drawText("Pac-Man",15,200,"green");
drawText("Round 515",310,200,"green");

//绘制所有豆子
drawAllBeans(2.2,"pink",15);
 
//绘制小怪物，可调整眼珠方向
drawImp(175,200,2,-6,"red");
drawImp(200,200,-2,2,"orange");
drawImp(225,196,8,0,"pink");
drawImp(175,30,-8,0,"yellow");
drawImp(254,190,-8,2,"purple");

//绘制直角形
drawRTR(275,340,"blue");
drawLTR(125,340,"blue");

//绘制凹形
drawRConcave(320,320,"blue");
drawLConcave(80,320,"blue");

//绘制T形
drawDT(200,100,'blue');
drawUT(200,360,"blue");   
drawRT(125,140,"blue");
drawLT(275,140,"blue");

//绘制外边界
drawBorder();

//绘制角色
drawPlayer(25,25,'yellow');

//绘制中心圆角矩形
drawMRR(200,200,80,60,'blue','white');

//绘制内部的圆角矩形
drawRR(200,270,80,20,'blue');
drawRR(65,50,60,30,'blue');
drawRR(140,50,40,30,'blue');
drawRR(260,50,40,30,'blue');
drawRR(335,50,60,30,'blue');
drawRR(65,100,60,20,'blue');
drawRR(335,100,60,20,'blue');
drawRR(125,250,20,60,"blue");
drawRR(275,250,20,60,"blue");

/*
drawRR(65,350,60,30,'blue');
drawRR(140,350,40,30,'blue');
drawRR(260,350,40,30,'blue');
drawRR(335,350,60,30,'blue');
drawRR(65,300,60,20,'blue');
drawRR(335,300,60,20,'blue');
*/

loadMultiImage(list,function(){
    //在此处定义编写onSuccess()函数，并调用getImageUrl和drawImage函数,实现图片绘制
        console.log('success');  
        drawClip();
        img1=getImageUrl('../image/tex1.jpg');
        img2=getImageUrl('../image/tex2.jpg');
        img3=getImageUrl('../image/tex3.jpg');
        img4=getImageUrl('../image/tex4.jpg');
      
        context.drawImage(img2,255,210,70,120);
        context.drawImage(img1,115,210,70,130);
        context.drawImage(img1,235,90,70,120);
        context.drawImage(img2,105,90,70,130);
        context.drawImage(img3,160,250,80,140);
        context.drawImage(img4,160,50,80,140);

    })

//填充背景  
function drawBackGoound(color)
{
    context.fillStyle=color;
    context.fillRect(0,0,400,400);
}

//绘制边界
function drawBorder()
{
context.strokeStyle='blue';
context.lineWidth=2;
context.beginPath();

//上部边界
drawRC(20,20,1,0);
context.lineTo(180,10);
drawRC(180,20,2,0);

context.lineTo(190,50);
drawRC(200,50,3,1);
drawRC(200,50,4,1);
context.lineTo(210,20);
drawRC(220,20,1,0);

context.lineTo(380,10);
drawRC(380,20,2,0);
context.lineTo(390,125);
drawRC(380,125,4,0);
context.lineTo(320,135);
drawRC(320,145,1,1);
context.lineTo(310,165);
drawRC(320,165,3,1);
context.lineTo(400,175);

context.moveTo(0,175);
context.lineTo(80,175);
drawRC(80,165,4,1);
context.lineTo(90,145);
drawRC(80,145,2,1);
context.lineTo(20,135);
drawRC(20,125,3,0);
context.lineTo(10,20);

//下部边界
context.moveTo(400,215);
context.lineTo(320,215);
drawRC(320,225,1,1);
context.lineTo(310,245);
drawRC(320,245,3,1);
context.lineTo(380,255);
drawRC(380,265,2,0);
context.lineTo(390,305);
drawRC(380,305,4,0);
context.lineTo(370,315);
drawRC(370,325,1,1);
drawRC(370,325,3,1);
context.lineTo(380,335);
drawRC(380,345,2,0);

context.lineTo(390,380);
drawRC(380,380,4,0);
context.lineTo(220,390);
context.lineTo(20,390);
drawRC(20,380,3,0);
context.lineTo(10,345);
drawRC(20,345,1,0);
context.lineTo(30,335);
drawRC(30,325,4,1);
drawRC(30,325,2,1);
context.lineTo(20,315);
drawRC(20,305,3,0);


context.lineTo(10,265);
drawRC(20,265,1,0);
context.lineTo(80,255);
drawRC(80,245,4,1);
context.lineTo(90,225);
drawRC(80,225,2,1);
context.lineTo(0,215);
context.stroke();           //显示轮廓

}

//绘制吃豆人
function drawPlayer(x,y,color)
{
context.fillStyle=color;
context.beginPath();
var startAngle = (Math.PI/180)*330; // 开始点
var endAngle = (Math.PI/180)*30;  //结束点
context.arc(x,y,7,startAngle,endAngle,true); //false是顺时针clockwise绘制，true是逆时针anticlockwise绘制。
context.lineTo(x-5,y);
context.fill();
}


//绘制圆角
function drawRC(x,y,loc,dir)
{ 
   switch (loc){

    //绘制左上角圆弧
    case 1: 
    if(dir === 0)
        context.arc(x,y,radius,Math.PI,Math.PI*270/180,false);
        else if (dir === 1)
          context.arc(x,y,radius,Math.PI*270/180,Math.PI,true);
    break;

    //绘制右上角圆弧
    case 2:
    if(dir === 0)
        context.arc(x,y,radius,Math.PI*270/180,Math.PI*2,false);
        else if (dir === 1)
         context.arc(x,y,radius,Math.PI*2,Math.PI*270/180,true);
    break;

    //绘制左下角圆弧
    case 3:
    if(dir === 0)
        context.arc(x,y,radius,Math.PI*0.5,Math.PI,false);
        else if (dir ===1)
        context.arc(x,y,radius,Math.PI,Math.PI*0.5,true);
    break;

    //绘制右下角圆弧
    case 4:
    if(dir === 0)
        context.arc(x,y,radius,0,Math.PI*0.5,false);
        else if (dir ===1)
        context.arc(x,y,radius,Math.PI*0.5,0,true);
    break; 
   }

}


//绘制下T型地形
function drawDT(x,y,color)
{
    Halfw=30;
    Halfl=0;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-Halfw,y-10);
    context.lineTo(x+Halfw,y-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x+20,y+Halfl+10);
    drawRC(x+20,y+Halfl+20,1,1);
    context.lineTo(x+10,y+30);
    drawRC(x,y+30,4,0);
    drawRC(x,y+30,3,0);
    context.lineTo(x-10,y+20);
    drawRC(x-20,y+20,2,1);
    context.lineTo(x-Halfw,y+10);
    drawRC(x-Halfw,y,3,0);
    drawRC(x-Halfw,y,1,0); 
    context.stroke();
}

//绘制上T型地形
function drawUT(x,y,color)
{
    Halfw=30;
    Halfl=0;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-Halfw,y-10);
    context.lineTo(x-20,y-10);
    drawRC(x-20,y-20,4,1);
    context.lineTo(x-10,y-40);
    drawRC(x,y-40,1,0);
    drawRC(x,y-40,2,0);
    context.lineTo(x+10,y-20);
    drawRC(x+20,y-20,3,1);
    context.lineTo(x+Halfw,y-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x+20,y+Halfl+10);
    context.lineTo(x-Halfw,y+10);
    drawRC(x-Halfw,y,3,0);
    drawRC(x-Halfw,y,1,0); 
    context.stroke();
}

//绘制右T型地形
function drawRT(x,y,color)
{
    Halfw=0;
    Halfl=40;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-10,y+Halfl);
    context.lineTo(x-10,y-Halfl);
    drawRC(x,y-Halfl,1,0);
    drawRC(x,y-Halfl,2,0);
    context.lineTo(x+10,y-20);
    drawRC(x+20,y-20,3,1);
    context.lineTo(x+20,y-10);
    drawRC(x+20,y,2,0)
    drawRC(x+20,y,4,0);
    context.lineTo(x+20,y+10);
    drawRC(x+20,y+20,1,1);
    context.lineTo(x+10,y+Halfl);
    drawRC(x,y+Halfl,4,0);
    drawRC(x,y+Halfl,3,0);
    context.stroke();
}

//绘制左T型地形
function drawLT(x,y,color)
{
    Halfw=0;
    Halfl=40;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x+10,y+Halfl);
    context.lineTo(x+10,y-Halfl);
    drawRC(x,y-Halfl,2,1);
    drawRC(x,y-Halfl,1,1);
    context.lineTo(x-10,y-20);
    drawRC(x-20,y-20,4,0);
    context.lineTo(x-20,y-10);
    drawRC(x-20,y,1,1);
    drawRC(x-20,y,3,1);
    context.lineTo(x-20,y+10);
    drawRC(x-20,y+20,2,0);
    context.lineTo(x-10,y+Halfl);
    drawRC(x,y+Halfl,3,1);
    drawRC(x,y+Halfl,4,1);
    context.stroke();
}


//绘制右凹形
function drawRConcave(x,y,color)
{   
    Halfl=30;
    Halfw=30;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-10,y+Halfl+10);
    context.lineTo(x-10,y-Halfl);
    drawRC(x,y-Halfl,1,0);
    context.lineTo(x+Halfw+10,y-Halfl-10);
    drawRC(x+Halfw+10,y-Halfl,2,0);
    drawRC(x+Halfw+10,y-Halfl,4,0);
    context.lineTo(x+20,y-Halfl+10);
    drawRC(x+20,y-Halfl+20,1,1);
    context.lineTo(x+10,y+Halfl-10);
    drawRC(x+20,y+Halfl-10,3,1);
    context.lineTo(x+Halfw+5,y+Halfl);
    drawRC(x+Halfw+5,y+Halfl+10,2,0);
    drawRC(x+Halfw+5,y+Halfl+10,4,0);
    context.lineTo(x,y+Halfl+20);
    drawRC(x,y+Halfl+10,3,0);
    context.stroke();

}

//绘制左凹形
function drawLConcave(x,y,color)
{
    Halfl=30;
    Halfw=30;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x+10,y+Halfl+10);
    context.lineTo(x+10,y-Halfl);
    drawRC(x,y-Halfl,2,1);
    context.lineTo(x-Halfw-10,y-Halfl-10);
    drawRC(x-Halfw-10,y-Halfl,1,1);
    drawRC(x-Halfw-10,y-Halfl,3,1);
    context.lineTo(x-20,y-Halfl+10);
    drawRC(x-20,y-Halfl+20,2,0);
    context.lineTo(x-10,y+Halfl-10);
    drawRC(x-20,y+Halfl-10,4,0);
    context.lineTo(x-Halfw-5,y+Halfl);
    drawRC(x-Halfw-5,y+Halfl+10,1,1);
    drawRC(x-Halfw-5,y+Halfl+10,3,1);
    context.lineTo(x,y+Halfl+20);
    drawRC(x,y+Halfl+10,4,1);
    context.stroke();
}

//绘制右直角型
function drawRTR(x,y,color)
{   
    Halfl=20;
    Halfw=30;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x+10,y-Halfl);
    context.lineTo(x+10,y+Halfl);
    drawRC(x,y+Halfl,4,0);
    drawRC(x,y+Halfl,3,0);
    context.lineTo(x-10,y-Halfl+20);
    drawRC(x-20,y-Halfl+20,2,1);
    context.lineTo(x-Halfw,y-Halfl+10);
    drawRC(x-Halfw,y-Halfl,3,0);
    drawRC(x-Halfw,y-Halfl,1,0);
    context.lineTo(x,y-Halfl-10);
    drawRC(x,y-Halfw+10,2,0);
    context.stroke();

}

//绘制左直角型
function drawLTR(x,y,color)
{   
    Halfl=20;
    Halfw=30;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-10,y-Halfl);
    context.lineTo(x-10,y+Halfl);
    drawRC(x,y+Halfl,3,1);
    drawRC(x,y+Halfl,4,1);
    context.lineTo(x+10,y-Halfl+20);
    drawRC(x+20,y-Halfl+20,1,0);
    context.lineTo(x+Halfw,y-Halfl+10);
    drawRC(x+Halfw,y-Halfl,4,1);
    drawRC(x+Halfw,y-Halfl,2,1);
    context.lineTo(x,y-Halfl-10);
    drawRC(x,y-Halfw+10,1,1);
    context.stroke();

}

//绘制圆角矩形
function drawRR(x,y,w,l,color)
{   
    var Halfw=(w-20)/2;
    var Halfl=(l-20)/2;
    context.strokeStyle=color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-Halfw,y-Halfl-10);
    context.lineTo(x+Halfw,y-Halfl-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    context.lineTo(x+Halfw+10,y+Halfl);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x-Halfw,y+Halfl+10);
    drawRC(x-Halfw,y+Halfl,3,0);
    context.lineTo(x-Halfw-10,y-Halfl);
    drawRC(x-Halfw,y-Halfl,1,0);
    context.stroke();
}

//绘制中心圆角矩形
function drawMRR(x,y,w,l,maincolor,doorcolor)
{   
    var Halfw=(w-20)/2;
    var Halfl=(l-20)/2;
    context.strokeStyle=maincolor;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-Halfw,y-Halfl-10);
    context.lineTo(x-Halfw/2,y-Halfl-10);
    context.moveTo(x+Halfw/2,y-Halfl-10);
    context.lineTo(x+Halfw,y-Halfl-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    context.lineTo(x+Halfw+10,y+Halfl);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x-Halfw,y+Halfl+10);
    drawRC(x-Halfw,y+Halfl,3,0);
    context.lineTo(x-Halfw-10,y-Halfl);
    drawRC(x-Halfw,y-Halfl,1,0);
    context.stroke();

    context.strokeStyle=doorcolor;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-Halfw/2,y-Halfl-10);
    context.lineTo(x+Halfw/2,y-Halfl-10);
    context.stroke();
}

//绘制小怪物
function drawImp(x,y,righteye,lefteye,color)
{   
    //绘制身体
    context.fillStyle = color;
    context.beginPath();
    context.moveTo(x-10,y+10);
    context.lineTo(x-10,y);
    context.arc(x,y,10,Math.PI,0,false);
    context.lineTo(x+10,y+10);
    context.lineTo(x+6.66,y+12);
    context.lineTo(x+3.33,y+10);
    context.lineTo(x,y+12);
    context.lineTo(x-3.33,y+10);
    context.lineTo(x-6.66,y+12);
    context.lineTo(x-10,y+10);
    context.fill();
     //context.bezierCurveTo(83,94,89,88,97,88);      //贝塞尔曲线，分二次曲线quadraticCurveTo()和三次曲线bezierCurveTo()，1个控制点和1个结束点，2个控制点和1个结束点，起始点为上次操作的延续位置。
   
     //绘制眼白
    context.fillStyle = "white";
    context.beginPath();
    context.arc(x+4.5,y,4,0,Math.PI*2,true);
    context.fill();
    context.beginPath();
    context.arc(x-4.5,y,4,0,Math.PI*2,true);
    context.fill(); 

    //绘制眼珠
    context.fillStyle = "black";
    context.beginPath();
    context.arc(x+righteye,y+1.5,1.8,0,Math.PI*2,true); //右眼珠
    context.fill();
    context.beginPath();
    context.arc(x+lefteye,y+1.5,1.8,0,Math.PI*2,true);  //左眼珠
    context.fill(); 
}

//绘制单一豆子
function drawBean(x,y,BeanRadius,color)
{
    context.fillStyle=color;
    context.beginPath();
    context.arc(x,y,BeanRadius,0,Math.PI*2,1); //结束点不能直接写0，确定为360度对应的弧度
    context.fill();
}


//绘制所有豆子
function drawAllBeans(BeanRadius,color,spacing)
{
   for(var i=0;i<24;i++)
   drawBean(104,24+i*spacing,BeanRadius,color);
   for(var i=0;i<24;i++)
   drawBean(296,24+i*spacing,BeanRadius,color);
   for(var i=0;i<6;i++)
   drawBean(25,39+i*spacing,BeanRadius,color);
   for(var i=0;i<7;i++)
   drawBean(375,25+i*spacing,BeanRadius,color);
   for(var i=0;i<12;i++)
   drawBean(119+i*spacing,294,BeanRadius,color);
   for(var i=0;i<12;i++)
   drawBean(119+i*spacing,78,BeanRadius,color);
   for(var i=0;i<3;i++)
   drawBean(25,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<3;i++)
   drawBean(375,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(149,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(254,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(179,310+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(224,310+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(345,312+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(55,312+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(24,287+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(376,287+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(179,40+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<3;i++)
   drawBean(224,24+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(314+i*spacing,268,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(314+i*spacing,24,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(314+i*spacing,79,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(314+i*spacing,125,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(42+i*spacing,24,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(42+i*spacing,79,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(25+i*spacing,125,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(25+i*spacing,268,BeanRadius,color);
   for(var i=0;i<1;i++)
   drawBean(40+i*spacing,310,BeanRadius,color);
   for(var i=0;i<1;i++)
   drawBean(360+i*spacing,310,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(120+i*spacing,24,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(238+i*spacing,24,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(40+i*spacing,344,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(345+i*spacing,344,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(164+i*spacing,344,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(224+i*spacing,344,BeanRadius,color);

   //最底层
   for(var i=0;i<4;i++)
   drawBean(40+i*spacing,380,BeanRadius,color);
   for(var i=0;i<13;i++)
   drawBean(104+i*spacing,380,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(296+i*spacing,380,BeanRadius,color);
}

//绘制文本
function drawText(text,x,y,color)
{
    context.font="bold 18px serif"   //注意在字符串中应用变量的格式，不要漏了加号
    context.fillStyle=color;
    context.fillText(text,x,y);
}

//裁剪矩形局域
function drawClip()
{
    baseRect(275,250,20,60);
    baseRect(125,250,20,60);
    baseRect(200,270,80,20);
    baseDT(200,100);
    baseLT(275,140);
    baseRT(125,140);
    context.clip();
}

//基本矩形
function baseRect(x,y,w,l)
{
    var Halfw=(w-20)/2;
    var Halfl=(l-20)/2;

    context.moveTo(x-Halfw,y-Halfl-10);
    context.lineTo(x+Halfw,y-Halfl-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    context.lineTo(x+Halfw+10,y+Halfl);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x-Halfw,y+Halfl+10);
    drawRC(x-Halfw,y+Halfl,3,0);
    context.lineTo(x-Halfw-10,y-Halfl);
    drawRC(x-Halfw,y-Halfl,1,0);
}

//基本下T型
function baseDT(x,y)
{
    Halfw=30;
    Halfl=0;
    context.moveTo(x-Halfw,y-10);
    context.lineTo(x+Halfw,y-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x+20,y+Halfl+10);
    drawRC(x+20,y+Halfl+20,1,1);
    context.lineTo(x+10,y+30);
    drawRC(x,y+30,4,0);
    drawRC(x,y+30,3,0);
    context.lineTo(x-10,y+20);
    drawRC(x-20,y+20,2,1);
    context.lineTo(x-Halfw,y+10);
    drawRC(x-Halfw,y,3,0);
    drawRC(x-Halfw,y,1,0); 
}

//基本右T型
function  baseRT(x,y)
{
    Halfw=0;
    Halfl=40;
    context.moveTo(x-10,y+Halfl);
    context.lineTo(x-10,y-Halfl);
    drawRC(x,y-Halfl,1,0);
    drawRC(x,y-Halfl,2,0);
    context.lineTo(x+10,y-20);
    drawRC(x+20,y-20,3,1);
    context.lineTo(x+20,y-10);
    drawRC(x+20,y,2,0)
    drawRC(x+20,y,4,0);
    context.lineTo(x+20,y+10);
    drawRC(x+20,y+20,1,1);
    context.lineTo(x+10,y+Halfl);
    drawRC(x,y+Halfl,4,0);
    drawRC(x,y+Halfl,3,0);

}

//基本左T型
function baseLT(x,y)
{
    Halfw=0;
    Halfl=40;
    context.moveTo(x+10,y+Halfl);
    context.lineTo(x+10,y-Halfl);
    drawRC(x,y-Halfl,2,1);
    drawRC(x,y-Halfl,1,1);
    context.lineTo(x-10,y-20);
    drawRC(x-20,y-20,4,0);
    context.lineTo(x-20,y-10);
    drawRC(x-20,y,1,1);
    drawRC(x-20,y,3,1);
    context.lineTo(x-20,y+10);
    drawRC(x-20,y+20,2,0);
    context.lineTo(x-10,y+Halfl);
    drawRC(x,y+Halfl,3,1);
    drawRC(x,y+Halfl,4,1);
 
}


//加载绘制图片
function getImageUrl(url)
{
    return images[url];
}

//加载一张图片
function loadImage(url,callback)
{
    const image= new Image();
    image.src=url;
    image.onload=function()
    {   
        images[url]=image;
        callback();
    }

}

//加载多张图片
function loadMultiImage(list, onSuccess)
{
    let current=0;
    const total=list.length;
    for(const item of list)
    {
    loadImage(item,function(){
        current++;
         if(current === total)
          {
            onSuccess();
          }
        })
    }
}